<template>
  <div>
    <!-- 添加用户 -->
      <el-button type="primary" @click="dialogVisible=true">添加新用户</el-button>
      <!-- 弹出层 -->
      <el-dialog
  title="添加新用户"
  :visible.sync="dialogVisible"
  width="30%" @close="onDialogClosed">
  <!-- 添加新用户信息 -->
  <el-form :model="form" label-width="80px" :rules="formRules" ref="myaddForm" >
  <el-form-item label="用户姓名" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="用户年龄" prop="age">
    <el-input v-model.number="form.age"></el-input>
  </el-form-item>
  <el-form-item label="用户头衔" prop="position">
    <el-input v-model="form.position"></el-input>
  </el-form-item>

  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onAddNewUser">确 定</el-button>
  </span>
</el-dialog>
    <!-- 用户列表 -->
     <el-table :data="userList"    stripe border >
     <!-- 渲染用户名这一列 -->
      <el-table-column type="index" label="#"></el-table-column><!-- 这是索引,加个type后直接补齐 -->
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="头衔" prop="position"></el-table-column>
      <el-table-column label="创建时间" >
         <!-- 这个column中提供了插槽，我们可以自己添加数据进去 -->
            <template #default="scope">
                {{scope.row.addtime | dataFormat}}
            </template>
      </el-table-column>
      <!-- 操作列 -->
        <el-table-column label="操作" prop="id">
          <!-- 默认的插槽有两种简写方式 -->
          <!-- #default= -->
          <!-- v-slot= -->
      <template #default="{row}">
        <el-button
          size="mini"
          @click="gotoMessage(row.id)">详情
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="onRemove(row.id)">删除</el-button>
      </template>
        </el-table-column>

    </el-table>
  </div>
</template>

<script>
import Vue from 'vue'

// 将时间格式化
Vue.filter('dataFormat',(str)=>{
    const dt= new Date(str)
     const year= dt.getFullYear()
     const M = dt.getMonth()
     const d = dt.getDay()
     const h=Timer(dt.getHours())
     const f=Timer(dt.getMinutes())
     const s=Timer(dt.getSeconds())
     return `${year}-${M}-${d}  ${h}:${f}:${s} `
})
function Timer (T){
    return T<10?'0'+T:T
}
export default {
    name:'UserList',
    data(){
      // 声明校验年龄的函数
      // value代表我们要校验的值
  let checkAge=(rule,value,cb)=>{
      if(!Number.isInteger(value)){
       return cb(new Error('年龄必须为数字'));
      }
      if(value>100||value<1){
        return cb(new Error('年龄必须在1-100之间'));
      }
      return cb()
  }
        return{
            userList:[],
            dialogVisible:false,
            form:{
              name:'',
              age:'',
              position:''

            },
            // 验证表单
            formRules:{
              name:[
                {required:true,message:'用户名是必填项',trigger:'blur'},
                  { min: 1, max: 15, message: '长度在 1到 15 个字符', trigger: 'blur' }
              ],
              age:[
                {required:true,message:'用户年龄是必填项' ,trigger:'blur'},
                 { validator: checkAge, trigger: 'blur' }
              ],
              position:[
                    {required:true,message:'头衔是必填项',trigger:'blur'},
                  { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
              ]
            }
        }
    },
    methods:{
       async getUserList(){
               const{data:res}= await this.$http.get('/api/users')
            //    console.log(res); 
               if(res.status!==0)return console.log('用户列表请求失败');
            //    this.userList=res.data   
               this.userList=res.data
              //  console.log(this.userList);
        },
        onDialogClosed(){
          // 拿到form组件的引用，调用resetFields（）方法
          this.$refs.myaddForm.resetFields()
        },
        // 添加新用户的处理函数
        onAddNewUser(){
          this.$refs.myaddForm.validate(async (boolean,object)=>{
            // 第一个参数是校检成功后的值，如果校检成功返回true
            // 第二个参数是错误对象
            // console.log(boolean);
            // console.log(object);
            if(boolean!==true)return
            // 需要执行添加的操作
           const {data:res} =await  this.$http.post('/api/users',this.form)
           if(res.status!==0)return this.$message.error('添加用户失败')
           console.log(res);
           this.$message.success('添加用户成功')
           this.$nextTick(()=>{
           this.dialogVisible=false
           })
          //  重新获取数组信息
           this.getUserList()
          })
        },
        // 添加删除的处理函数
        onRemove(id){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async () => {
           const {data:res}=await this.$http.delete('/api/users/'+id)
           if(res.status!==0) return this.$message.error('删除数据失败')
           this.getUserList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        // 编程式导航，跳转页面
        gotoMessage(id){
          this.$router.push('/users/'+id)
        }
    },
    created(){
        this.getUserList()
        
    }

}
</script>

<style lang="less" scoped>
  .el-table{
    margin-top: 15px;
  }
</style>